
// 绘制验证码
function drawCode(canvasDomId,hiddenDomId) {
    var canvas = document.getElementById(canvasDomId);   // 拿到画布

    // 检测空节点
    if(!canvas) return;

    if (canvas.getContext) {                  //检查支持性
        var ctx = canvas.getContext("2d");   // 拿到画笔，获得绘制上下文的绘画功能

        drawCodeValid();
        canvas.onclick = drawCodeValid;

        //获取随机颜色
        function randomColor(min, max) {
            return "rgba(" + randomRange(min, max) + ',' + randomRange(min, max) + ',' + randomRange(min, max) + ",1)";
        }

        // 获取随机数
        function randomRange(min, max) {     //   5 - 8
            return Math.floor(Math.random() * (max - min + 1) + min);   // 0- 3 + 5  ===> 5-8
        }                                 //   0 - 10     ===> 0 - 11
                                          // -45 - 45     ===> 0 - 91 -45

        // 绘制验证码
        function drawCodeValid() {
            var number = 4;
            var txt = "";
            var cHeight = canvas.height;
            var cWidth = canvas.width;

            // 画布绘制
            ctx.save();
            ctx.fillStyle = randomColor(180, 220);
            ctx.beginPath();
            ctx.fillRect(0, 0, cWidth, cHeight);
            ctx.restore();


            // 数字绘制
            ctx.Baseline = "bottom";                              // 文字底部对齐
            for (var i = 0; i < number; i++) {
                var deg = randomRange(-45, 45);
                var x = (cWidth - 10) / number * i + 10;
                var y = randomRange(cHeight / 2, cHeight - 10);
                var color = randomColor(40, 120);
                var currentNum = randomRange(0, 10).toString()[0];
                txt += currentNum;
                ctx.save();
                ctx.fillStyle = color;                             //颜色必需比背景颜色更深
                ctx.font = randomRange(25, 40) + "px SimHei";
                ctx.translate(x, y);
                ctx.rotate(deg * Math.PI / 180);                        // 移动,旋转画布
                ctx.beginPath();
                ctx.fillText(currentNum, 0, 0);
                ctx.restore();
                // console.log(currentNum,color,x,y);
            }

            // 小黑点绘制
            for (var j = 0; j < number * 30; j++) {
                var xCircle = randomRange(0, cWidth);
                var yCircle = randomRange(0, cHeight);
                ctx.save();
                ctx.fillStyle = randomColor(40, 120);     // 颜色偏深
                ctx.beginPath();
                ctx.arc(xCircle, yCircle, 1, 0, 360 * Math.PI / 180);        // 绘制小圆
                ctx.closePath();
                ctx.fill();                              // 自动闭合路径
                ctx.restore();
            }

            // 划线绘制
            for (var k = 0; k < number * 2; k++) {
                var xLineStart = randomRange(0, cWidth);
                var yLineStart = randomRange(0, cHeight);
                var xLineEnd = randomRange(0, cWidth);
                var yLineEnd = randomRange(0, cHeight);
                ctx.save();
                ctx.strokeStyle = randomColor(80, 140);

                ctx.beginPath();
                ctx.moveTo(xLineStart, yLineStart);           // 抬起画笔
                ctx.lineTo(xLineEnd, yLineEnd);               // 绘制划线
                ctx.stroke();                                // 绘制路径
                ctx.restore();
            }
            document.getElementById(hiddenDomId).value = txt;
            console.log('当前的验证码是' + txt);
        }

    } else {
        alert('当前Javascript不支持画布元素');
    }
}
